<div class="chat-container"
     [class.collapsed]="collapsed"
     [ngStyle]="{ bottom: position.bottom + 'px', right: position.right + 'px' }"
     (mousedown)="startDrag($event)">

  <div class="chat-header" (dblclick)="toggleCollapse()">
    <div class="header-title">协助聊天</div>
    <div class="online-users">
      在线人数: {{ onlineUsers }}
    </div>
    <button (click)="toggleCollapse(); $event.stopPropagation()" class="toggle-btn">
      {{ collapsed ? '展开' : '收起' }}
    </button>
  </div>

  <div class="chat-messages" *ngIf="!collapsed">
    <div *ngFor="let msg of messages; let i = index">
      <div [ngClass]="{'system-message': messages_type[i] === 'system', 'user-message': messages_type[i] === 'user', 'error-message': messages_type[i] === 'error'}">
        <span>{{ msg }}</span>
      </div>
    </div>
  </div>

  <div class="chat-input" *ngIf="!collapsed">
    <input [(ngModel)]="newMessage" (keyup.enter)="send()" placeholder="输入消息..." />
    <button (click)="send()">发送</button>
  </div>
</div>
